<template>
	 <el-dialog v-model="dialogFormVisible"  width="700" >
		  <span class='title'>发新帖</span>
		 <div class="add">
		   <el-row :gutter="15">
		     <el-form ref="addMusicRef" :model="music" :rules="rules" size="default" label-width="100px">
		       <el-col :span="24">
		         <el-form-item  label-width="120px" label="类别" prop="music_type">
		           <el-radio-group  v-model="music.music_type" size="default">
		             <el-radio size="default" v-for="(item, index) in music_typeOptions" :key="index" :label="item.value"
		               :disabled="item.disabled">{{item.label}}</el-radio>
		           </el-radio-group>
		         </el-form-item>
		       </el-col>
		       <el-col :span="24">
		         <el-form-item label-width="120px" label="歌名" prop="music_name">
		           <el-input size="default" v-model="music.music_name" type="text" placeholder="请输入歌名" clearable prefix-icon='Flag'
		             :style="{width: '100%'}"></el-input>
		         </el-form-item>
		       </el-col>
		       <el-col :span="24">
		         <el-form-item label-width="120px" label="歌手" prop="music_author">
		           <el-input size="default" v-model="music.music_author" type="text" placeholder="请输入歌手" clearable
		             prefix-icon='Headset' :style="{width: '100%'}"></el-input>
		         </el-form-item>
		       </el-col>
		       <el-col :span="24">
		         <el-form-item label-width="120px" label="发布时间" prop="music_date">
		           <el-date-picker size="default" v-model="music.music_date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
		             :style="{width: '100%'}" placeholder="请选择发布时间" clearable></el-date-picker>
		         </el-form-item>
		       </el-col>
		       <el-col :span="24">
		         <el-form-item label-width="120px" label="歌词" prop="music_gc">
		         <!--  <el-input size="default" v-model="music.music_gc" type="textarea" placeholder="请输入歌词" :maxlength="1000"
		             show-word-limit :autosize="{minRows: 4, maxRows: 10}" :style="{width: '100%'}"></el-input> -->
					 <el-upload
					     ref="music_gc"
					     action="http://localhost:3000/api/resource/lrc"
					     :limit="1"
					     :auto-upload="false"
					 	
					 	:on-success="handleSuccessgc"
					 	accept="lrc/*"
					   >
					     <template #trigger>
					       <el-button type="primary">选择文件</el-button>
					     </template>
					     <el-button class="ml-3" type="success" @click="submitUploadgc">
					       上传音频
					     </el-button>
					     <template #tip>
					       <div class="el-upload__tip text-red">
					         限制上传一个文件，旧文件会被新文件覆盖
					       </div>
					     </template>
					   </el-upload> 
		         </el-form-item>
		       </el-col>
		      <el-col :span="24">
		    
		             <el-form-item label-width="120px" label="音频文件" prop="music_file" required>
						 <el-upload
						     ref="music_file"
						     action="http://localhost:3000/api/resource/src"
						     :limit="1"
						     :auto-upload="false"
							 :before-upload="music_fileBeforeUpload"
						 	:on-success="handleSuccess"
							accept="audio/*"
						   >
						     <template #trigger>
						       <el-button type="primary">选择文件</el-button>
						     </template>
						     <el-button class="ml-3" type="success" @click="submitUpload">
						       上传音频
						     </el-button>
						     <template #tip>
						       <div class="el-upload__tip text-red">
						         限制上传一个文件，旧文件会被新文件覆盖
						       </div>
						     </template>
						   </el-upload> 
		             </el-form-item>
		           </el-col>
		           <el-col :span="24">
		             <el-form-item label-width="120px" label="音频封面" prop="music_img" required >
					   <el-upload
					       ref="music_img"
					   	 :before-upload="music_imgBeforeUpload"
		                   :on-success="handleSuccessimg"
					       action="http://localhost:3000/api/resource/img"
					       :limit="1"
					       :auto-upload="false"
				           accept="image/*">
		
					       <template #trigger>
					         <el-button type="primary">选择文件</el-button>
					       </template>
					       <el-button class="ml-3" type="success" icon="el-icon-upload" @click="submitUploadimg">
					         上传封面
					       </el-button>
					       <template #tip>
					         <div class="el-upload__tip text-red">
					           限制上传一个文件，旧文件会被新文件覆盖
					         </div>
					       </template>
					     </el-upload>
		             </el-form-item>
		       </el-col>
		       <el-col :span="24">
		         <el-form-item label-width="400px">
					 <el-button @click="cancelForm">关闭</el-button>
		           <el-button @click="resetForm">重置</el-button>
				   <el-button type="primary" @click="submitForm">提交</el-button>
		         </el-form-item>
		       </el-col>
		     </el-form>
		   </el-row>
		   
		 </div>
	  </el-dialog>
</template>
<script setup lang="ts">
import { toRefs} from 'vue';
import { ref,reactive } from 'vue'
import axios from 'axios';
import { ElMessage } from 'element-plus'
import type { UploadInstance } from 'element-plus'


// import { UploadInstance } from 'element-plus';
// import { Upload } from 'element-plus';
const music_file = ref<UploadInstance>()
const music_img = ref<UploadInstance>()
const music_gc = ref<UploadInstance>()
	// 上传音频
	const submitUpload = () => {
		music_file.value!.submit()
	}
	// 上传图片
	const submitUploadimg = () => {
		music_img.value!.submit()
	}
	// 上传歌词
	const submitUploadgc = () => {
		music_gc.value!.submit()
	}
	// 成功上传后的回调函数
	const handleSuccess = (res) => {
		music.value.music_file=res
		console.log(res)
	}
	
	const handleSuccessimg = (res) => {
		music.value.music_img=res
		console.log(res)
	}
	const handleSuccessgc = (res) => {
		music.value.music_gc=res
		console.log(res)
	}
const dialogFormVisible = ref(false)
const emits = defineEmits(["flushPage"]);
const addMusicRef = ref()
const data = reactive({
	music: {
	  music_type: 1,
	  music_name: undefined,
	  music_author: undefined,
	  music_date: undefined,
	  music_gc: undefined,
	  music_file: undefined,
	  music_img: undefined,
	  music_user_name:undefined,
	  music_user_id:undefined,
	  //以下为发帖默认值
	  music_state:3,//待审核
	  music_level:2,//	权限公开
	  music_rm:2,//常规
	  },
	rules: {
	  music_type: [{
		required: true,
		message: '类别不能为空',
		trigger: 'change'
	  }],
	  music_name: [{
		required: true,
		message: '请输入歌名',
		trigger: 'blur'
	  }],
	  music_author: [{
		required: true,
		message: '请输入歌手',
		trigger: 'blur'
	  }],
	  music_date: [{
		required: true,
		message: '请选择发布时间',
		trigger: 'change'
	  }],
	  music_gc: [{
		required: true,
		message: '请输入歌词',
		trigger: 'blur'
	  }],
	}
	})
const {
music,
rules
} = toRefs(data)
const music_typeOptions = ref([{
"label": "华语",
"value": 1
}, {
"label": "日韩",
"value": 2
}, {
"label": "欧美",
"value": 3
}, {
"label": "纯音乐",
"value": 5
}, {
"label": "其他",
"value": 4
}])

/**
* @name: 上传之前的文件判断
* @description: 上传之前的文件判断，判断文件大小文件类型等
* @param {*} file
* @return {*}
*/
function music_fileBeforeUpload(file) {
let isRightSize = file.size / 1024 / 1024 < 20
if (!isRightSize) {
  ElMessage.error('文件大小超过 20MB')
}
let isAccept = new RegExp('audio/*').test(file.type)
if (!isAccept) {
  ElMessage.error('应该选择audio/*类型的文件')
}
return isRightSize && isAccept
}
/**
* @name: 上传之前的文件判断
* @description: 上传之前的文件判断，判断文件大小文件类型等
* @param {*} file
* @return {*}
*/
function music_imgBeforeUpload(file) {
let isRightSize = file.size / 1024 / 1024 < 20
if (!isRightSize) {
  ElMessage.error('文件大小超过 20MB')
}
let isAccept = new RegExp('image/*').test(file.type)
if (!isAccept) {
  ElMessage.error('应该选择image/*类型的文件')
}
return isRightSize && isAccept
}
//获取登陆用户名，赋给music_user_name
const jsonUser =  localStorage.getItem("user");
const user = JSON.parse(jsonUser);
/**
* @name: 表单提交
* @description: 表单提交方法
* @return {*}
*/
function submitForm() {
	addMusicRef.value.validate((valid) => {
	  if (!valid) return
	  if(user !=null && user !=''){
		  music.value.music_user_name = user.user_name;
		  music.value.music_user_id=user.user_id;
		  		 axios({
		  			url:'/api/music',
		  			method:'POST',
		  			data:music.value
		  		 }).then( response => {
		  			if(response.data === true){
		  				ElMessage.success("操作成功！");
		  				emits("flushPage");
		  				resetForm();
		  				dialogFormVisible.value = false;
		  			}else{
		  				ElMessage.error("操作失败！");
		  				resetForm();
		  				dialogFormVisible.value = false;
		  				
		  			}
		  		 });
	  }else{
		  ElMessage.error("请先登录！");
		  window.location.href = "/login";
	  }
		  

	 
	})
}
/**
* @name: 表单重置
* @description: 表单重置方法
* @return {*}
*/
function resetForm() {
addMusicRef.value.resetFields()

}

const handleAddForm = () => {
	dialogFormVisible.value = true;
}

const cancelForm = () => {
	dialogFormVisible.value = false;
	resetForm();
};
// 将handleAddForm暴露给父组件
defineExpose({
	handleAddForm
})
</script>
<style>
.el-upload__tip {
line-height: 1.2;
}
.add{
	background-image: url(./img.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.title{
	color: blue;
	font-size: 20px;
}
</style>
